<template>
  <div>
    <div class="box4">
      <div class="contentbox" v-for="(v, i) in arr" :key="i">
        <p class="p1">{{ v.title1 }}</p>
        <p class="p1">{{ v.title2 }}</p>
        <p class="p3">{{ v.title3 }}></p>
      </div>
    </div>
    <div class="box5">
      <p class="p4">基本信息</p>
      <p class="p5">村龄:8天(2021年9月注册)</p>
      <p class="p6">地区:陕西 西安</p>
    </div>
    <div class="box6">
      <p class="p7">音乐品味</p>
      <div class="box-inner1" v-for="(v,i) in arrn" :key="i">
        <img :src="v.imgurl" class="innerimg"/>
        <div>
            <p>{{v.str1}}</p>
            <p>{{v.str2}}</p>
        </div>
      </div>
    </div>
     <div class="box6">
      <p class="p7">创建歌单</p>
      <div class="box-inner1" v-for="(v,i) in arrk" :key="i">
        <img :src="v.urlimg" class="innerimg"/>
        <div>
            <p>{{v.subject}}</p>
            <p>{{v.num}}</p>
        </div>
      </div>
    </div>
    
    

    <Play/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { title1: "唱片收藏", title2: "表达音乐趣味", title3: "布置唱片架" },
        { title1: "展示动态图片", title2: "让别人了解您", title3: "使用相册" },
        { title1: "大声说出你的", title2: "愿望", title3: "写愿望清单" },
      ],
      arrn:[
          {imgurl:"img/inner1.png",str1:"听歌排行",str2:"累计听歌1首"},
          {imgurl:"img/inner2.png",str1:"我喜欢的音乐",str2:"1首,累计播放20次"}
      ],
      arrk:[
          {urlimg:"img/love1.png",subject:"最爱",num:"1首"},
          {urlimg:"img/love2.png",subject:"喜欢",num:"2首"}
      ]
    };
  },
};
</script>

<style scoped>
.box4 {
  width: 100%;
  height: 3.06rem;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.3rem;
}
.contentbox {
  width: 2.15rem;
  height: 2.73rem;
  background-color: #ffffff;
  border-radius: 0.1rem;
  text-indent: 0.2rem;
  padding-top: 0.35rem;
}
.p1,
.p2 {
  color: #585858;
  line-height: 0.38rem;
}
.p3 {
  margin-top: 0.7rem;
  color: red;
}
.box5 {
  height: 2.53rem;
  background-color: #ffffff;
  border-radius: 0.1rem;
}
.box5 > p {
  line-height: 0.83rem;
  text-indent: 0.5rem;
}
.p4 {
  font-size: 0.35rem;
  font-weight: bolder;
}
.p5,
.p6 {
  font-size: 0.25rem;
}
.box6 {
  background-color: #ffffff;
  border-radius: 0.1rem;
  margin-top: 0.32rem;
  text-indent: 0.5rem;
}
.p7 {
  height: 1.06rem;
  line-height: 1.06rem;
  font-size: 0.36rem;
  font-weight: bolder;
  text-indent: 0.5rem;
}
.innerimg{
    width: 1.06rem;
    height: 1.06rem;
    border-radius: 0.2rem;
    margin-left: 0.5rem;
}
.box-inner1{
    display: flex;
    margin-top:0.23rem;
}
.box-inner1 p{
    line-height: 0.53rem;
    font-size: 0.28rem;
}
.box-inner1 p:nth-of-type(1){
    font-weight: bolder;
}

</style>